﻿<div id="tmp-tryoutSignup">
    <div style="width:600px; margin:0 auto;">
        <form name="tryoutForm" class="form-horizontal" ng-submit="submitForm(tryoutForm.$valid)" ng-controller="TryoutSignupController" ng-init="setForm('tryoutForm')" novalidate>
            <div class="form-group">
                <p>{{item.caption.signupAction}}</p>
                <ul>
                    <li ng-repeat="itm in item.caption.signupActionList">{{itm.title}}</li>
                </ul>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-question"></i></span>
                    <span class="input-group-addon" style="padding:0;border:0;width:45%;">
                        <input type="text" class="form-control" value="{{item.action.title}}" disabled />
                    </span>
                    <select class="form-control" name="action" tabindex="1" required ng-model="data.action" ng-options="opt as opt.text for opt in item.action.list" directive-auto-focus></select>
                </div>
            </div>
            <!-- NAME -->
            <div class="form-group" ng-class="{ 'has-error' : tryoutForm.name.$invalid && !tryoutForm.name.$pristine }">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-user"></i></div>
                    <input type="text" tabindex="2" name="name" placeholder="{{item.placeholder.name}}" class="form-control" ng-model="data.name" required ng-minlength="6">
                </div>
                <p ng-show="tryoutForm.name.$error.required && !tryoutForm.name.$pristine" class="help-block">{{item.error.required.name}}</p>
                <p ng-show="tryoutForm.name.$error.minlength" class="help-block">{{item.error.minlength.name}}</p>
            </div>
            <!-- EMAIL -->
            <div class="form-group" ng-class="{ 'has-error' : tryoutForm.email.$invalid && !tryoutForm.email.$pristine }">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-at"></i></div>
                    <input type="text" tabindex="3" name="email" class="form-control" ng-model="data.email" placeholder="{{item.placeholder.email}}" required ng-pattern="/^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+.[a-z0-9-]/" />
                </div>
                <p ng-show="tryoutForm.email.$error.required && !tryoutForm.email.$pristine" class="help-block">{{item.error.required.email}}</p>
                <p ng-show="tryoutForm.email.$error.pattern && !tryoutForm.email.$pristine" class="help-block">{{item.error.valid.email}}</p>
            </div>
            <!-- PHONE -->
            <div class="form-group">
                <div class="input-group input-group-tel">
                    <div class="input-group-addon"><i class="fa fa-phone"></i></div>
                    <input type="tel" name="phone" ng-model="data.phone" class="form-control" placeholder="{{item.placeholder.phone}}" directive-mask-phone tabindex="4" />
                </div>
            </div>
            <!-- NOTE -->
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-pencil"></i></div>
                    <textarea name="note" tabindex="5" rows="3" ng-model="data.note" class="form-control" placeholder="{{item.placeholder.note}}" ng-keydown="keydown($event)"></textarea>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary" tabindex="6" ng-model="data.submit" ng-disabled="tryoutForm.$invalid || data.locked" directive-end-index="tryoutForm"><span class="fa fa-upload" aria-hidden="true"></span>&nbsp;&nbsp;{{item.caption.submit}}</button>
                &nbsp;&nbsp;{{item.caption.requiredFields}}
            </div>
        </form>
    </div>
</div>